<template>
  <div id="barchart" ref="linechart2" style="width: 100%; height: 100%"/>
</template>
<script>
import * as echarts from 'echarts';

const chartData = {
  xData: [
    "海康威视",
    "大华",
    "小米",
    "萤石",
    "英飞拓",
    "乐橙",
    "松下",
    "宇视",
    "海雀",
  ],
  data: [150, 140, 65, 80, 160, 210, 80, 60, 70],
}
export default {
  mounted() {
    let that = this;
    setTimeout(function () {
      that.initChart();
    }, 0)
  },
  methods: {
    initChart() {
      let curChart = echarts.init(document.getElementById('barchart'))
      //监听图标的变化 重新渲染
      window.addEventListener("resize", () => {
        curChart.resize();
      });
      const exampleOption = {
        // 提示框效果设置
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: (params) => {
            const str = ` ${params[0].axisValue}
                    </br>
                    ${params[0].marker}安装量: ${params[0].value}`
            return str;
          },
        },
        // 图例设置
        legend: {
          show: false,
          textStyle: {fontSize: 15, color: '#fff'},
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 15,
          top: '0%',
          right: '0%',
        },
        textStyle: {
          fontSize: 12
        },
        grid: {
          containLabel: true, // 防止标签溢出
          left: '0%',
          top: '10%',
          bottom: '0%',
          right: '0%',
        },
        // X轴设置
        xAxis: {
          type: 'category',
          data: chartData.xData,
          axisLine: {
            lineStyle: {
              color: '#979797',
              opacity: 0.38
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            margin: 10,
            fontFamily: 'Microsoft YaHei',
            color: '#ffffff',
            fontSize: 14
          },
        },
        // Y轴设置
        yAxis: {
          nameTextStyle: {
            verticalAlign: 'middle',
            align: "right"
          },
          type: 'value',
          min: 0,
          boundaryGap: ['0%', '10%'],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.38
            },
          },
          splitLine: {
            lineStyle: {
              color: ['#fff'],
              type: 'dashed',
              opacity: 0.09,
            },
          },
          axisLabel: {
            fontSize: 15
          },
        },
        series: [
          // 柱状图描绘
          {
            name: "app安装量",
            data: chartData.data,
            type: 'bar',
            // show:false,
            barMaxWidth: 'auto',
            barWidth: 27,
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,

                colorStops: [
                  {
                    offset: 0,
                    color: '#16B2FF',
                  },
                  {
                    offset: 1,
                    color: 'rgba(90,74,219,0.44)'
                  },
                ],
              },
            },
            label: {
              show: true,
              position: 'top',
              formatter: '{c}', // 在柱子上显示数据
              color: '#fff', // 设置label颜色为红色
              fontSize: 16,
              // fontFamily: 'Microsoft YaHei'
            },
          },
          // 菱形描绘
          {
            data: chartData.data,
            type: 'pictorialBar',
            barMaxWidth: 'auto',
            symbolPosition: 'end', // 位置在柱状图顶部
            symbol: 'diamond', // 图形类型为菱形
            symbolOffset: [0, '-50%'], // 下移一半，遮住柱状图顶部
            symbolSize: [25, 10],
            zlevel: 200, // 菱形图形显示在柱状图之上
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1.3,
                type: 'linear',
                global: false,
                textStyle: {fontSize: 15, color: '#fff'},
                label: {
                  show: true,
                  position: 'top',
                  formatter: '{c}', // 在柱子上显示数据
                  color: '#168b9b' // 设置label颜色为红色
                },
                colorStops: [
                  {
                    offset: 0,
                    color: '#16B2FF',
                  },
                  {
                    offset: 1,
                    color: 'rgba(90,74,219,0.8)'
                  },
                ],
              },
            }
          },
        ],
      };
      curChart.setOption(exampleOption)
    },
  }
};
</script>
